<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Test: The 'image-fit' property applies to replaced elements only</title>
  <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/>
  <link rel="help" href="http://www.w3.org/TR/css3-page/#the-fit"/>
  <meta name="assert" content="The 'image-fit' property does not apply to non-replaced elements."/>
  <style type="text/css"><![CDATA[
	div {
		overflow: visible;
		border: 2px solid aqua;
	}
	div.outer {
		height: 150px;
		width: 150px;
		border-color: black;
		margin-bottom: 10px;
		}
	div#makeRoom {margin-bottom: 160px;}
		div div {
			margin-top: -2px;
			margin-left: -2px;
			image-fit: fit;
		}
		div#inner1 {
			height: 150px;
			width: 300px;
			}
		div#inner2 {
			height: 150px;
			min-width: 300px;
			}
		div#inner3 {
			min-height: 300px;
			width: 150px;
			}
		div#relpos {position: relative;}
			div#abspos {
				position: absolute;
				top: 0;
		        left: 0;
		        height: 150px;
		        width: 300px;
			}
			div p {width: 140px;}
  ]]></style>
</head>
<body>
	<div class="outer">
		<div id="inner1">
			<p>The black line in this box should be exactly halfway between the two blue lines.</p>
		</div>
	</div>
	
	<div class="outer">
		<div id="inner2">
			<p>The black line in this box should be exactly halfway between the two blue lines.</p>
		</div>
	</div>
	
	<div class="outer" id="makeRoom">
		<div id="inner3">
			<p>The black line in this box should be exactly halfway between the two blue lines.</p>
		</div>
	</div>
	
	<div class="outer" id="relpos">
		<div id="abspos">
			<p>The black line in this box should be exactly halfway between the two blue lines.</p>
		</div>
	</div>
</body>
</html>